<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<%--    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">--%>
    <link rel="icon" href="../../favicon.ico" type="image/x-icon"/>
    <title>书本书</title>
    <%--    <script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>--%>
    <%--    <script type="text/javascript" src="../../layer/layer.js"></script>--%>
    <script type="text/javascript" src="../../layui/layui.all.js"></script>
    <script type="text/javascript" src="../../layui/layui.js"></script>
    <link rel="stylesheet" href="../../layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">达理书城</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/home">控制台</a></li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/toInsertBook">商品管理</a></li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/user">用户</a></li>
            <li class="layui-nav-item">
                <a href="${pageContext.request.contextPath}/grzy">网页导航</a>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="../../image/tx.jpg" class="layui-nav-img">
                    ${name}
                </a>
            </li>
            <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/userout">退出登录</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="${pageContext.request.contextPath}/selectAllBook">所有图书</a>
                    <dl class="layui-nav-child">
                        <dd><a href="${pageContext.request.contextPath}/wxl">文学类</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/dml">动漫类</a></dd>
                        <dd><a href="${pageContext.request.contextPath}/kjl">科技类</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="${pageContext.request.contextPath}/Borrow">关于借阅</a>
                </li>
                <li class="layui-nav-item"><a href="${pageContext.request.contextPath}/journal">本站日志</a></li>
                <li class="layui-nav-item"><a href="">设置</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <br>
        <br>
        <form class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input id="bookName" type="text" name="bookName" lay-verify="pass" placeholder="按书名搜索书籍" autocomplete="off" class="layui-input">
                </div>
                <button  id="submit" type="button" data-type="reload" class="layui-btn layui-btn-primary" ><i class="layui-icon">&#xe615;</i></button>
            </div>
        </form>
        <table class="layui-hide" id="test" lay-data="{id: 'test'}"  lay-filter="test"></table>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        &copy 2020-2021 吴劲松|<a href="../../关于我.html" >关于我</a> 501664112@qq.com | 当前在线人数: ${OnlineCount} | <span id="time"></span>
    </div>
</div>
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="edit"><i class="layui-icon">&#xe642;</i></a>
    <a class="layui-btn layui-btn-sm" lay-event="del"><i class="layui-icon">&#xe640;</i></a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'${pageContext.request.contextPath}/wxlBook'
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示'
                ,layEvent: 'LAYTABLE_TIPS'
                ,icon: 'layui-icon-tips'
            }]
            ,title: '用户数据表'
            ,cols: [[
                {type: 'checkbox', fixed: 'left'}
                ,{field:'bookID', width: 200,title:'ID',  fixed: 'left', unresize: true, sort: true}
                ,{field:'bookName', width: 300,title:'书名',  edit: 'text'}
                ,{field:'bookCounts',width: 200, title:'数量',  edit: 'text'}
                ,{field:'type', width: 200,title:'类型' }
                ,{field:'detail', width: 300,title:'备注'}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
            ]]
            ,page: true
            , limits: [10, 15, 20]  //一页选择显示3,5或10条数据
            , limit: 15 //一页显示15条数据
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据
                var result;
                if (this.page.curr) {
                    result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr);
                }
                else {
                    result = res.data.slice(0, this.limit);
                }
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result //解析数据列表
                };
            }
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });

        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    $.ajax({
                            type: "get",
                            url:"${pageContext.request.contextPath}/deleteBook",
                            data: {"bookID":data.bookID},
                            //  dataType: "json",
                            success:function (msg) {
                                obj.del();
                                layer.close(index);
                                layer.confirm('删除成功!')
                            },
                            error:function () {
                                layer.confirm('删除失败!')
                            },
                        }
                    )
                });
            } else if(obj.event === 'edit'){
                $.get({
                        url:"${pageContext.request.contextPath}/updateBook",
                        data:{"bookID":data.bookID,"bookName":data.bookName,"bookCounts":data.bookCounts,"type":data.type,"detail":data.detail},
                        success:function (msg){
                            window.location.href ="${pageContext.request.contextPath}/updateBook?bookID="+data.bookID+"&bookName="+data.bookName+"&bookCounts="+data.bookCounts+"&type="+data.type+"&detail="+data.detail;
                        }
                    }
                )
            }
        });
        $("#submit").on("click", function() {
            table.reload('test', {
                //type: "get",
                url: "${pageContext.request.contextPath}/selectlBookbyName",
                // data: {'bookName': $("#bookName").val()},
                page: {
                    curr: 1
                },
                where:{
                    bookName:$("#bookName").val()
                },
                success: function (data) {
                    alert(data)

                },
                error: function (data) {
                    alert("error:" + data.responseText);
                }

            })
        })
    });
    window.onload =function Time(){
        var time = new Date();
        var Month = time.getUTCMonth()+1;
        document.getElementById("time").innerText=time.getUTCFullYear()+"年"+Month+"月"+time.getUTCDate()+"日";
    }
</script>
</body>
</html>
